<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="title"
    direction="rtl"
    size="70%"
    @close="close"
  >
    <el-row>
      <el-col :span="14">
        <customer :customer="customer" />
        <el-card>
          <template #header>
            <div class="card-header">
              <el-row>
                <el-col :span="12">
                  <span>收支记录</span>
                </el-col>
                <el-col :span="12" style="text-align: right">
                  <el-tag>
                    收入：{{ customer ? customer.received_amount : 0 }}
                  </el-tag>
                  <el-tag>
                    支出：{{ customer ? customer.payout_amount : 0 }}
                  </el-tag>
                  <el-tag>
                    利润：{{
                      customer
                        ? customer.received_amount - customer.payout_amount
                        : 0
                    }}
                  </el-tag>
                </el-col>
              </el-row>
            </div>
          </template>
          <finance-list ref="financeListRef" :customer="customer" />
        </el-card>
      </el-col>
      <el-col :span="9" :offset="1">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>添加收款记录</span>
            </div>
          </template>
          <el-form
            ref="formRef"
            v-loading="formLoading"
            label-width="80px"
            :model="form"
            :rules="rules"
          >
            <el-form-item label="金额" prop="amount">
              <el-input v-model="form.amount" />
            </el-form-item>
            <el-form-item label="收支类型">
              <el-radio-group v-model="form.transaction_type">
                <el-radio label="income">收入</el-radio>
                <el-radio label="expense">支出</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收支渠道" prop="paymentMethod">
              <el-select
                v-model="form.paymentMethod"
                filterable
                allow-create
                clearable
                :reserve-keyword="false"
                placeholder="选择你的支付方式"
              >
                <el-option
                  v-for="item in pay_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="收支分类" prop="category">
              <el-select
                v-model="form.category"
                filterable
                clearable
                allow-create
                :reserve-keyword="false"
                placeholder="选择你的收支分类"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="note">
              <el-input v-model="form.note" />
            </el-form-item>
            <div style="text-align: center">
              <el-button @click="close">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script>
  import { addCustomerFinanceRecord } from '@/api/boyiFinance'

  import { parseTime } from '@/utils'
  import FinanceList from '@/views/boyi/finance/components/FinanceList'
  import Customer from './Customer'
  export default defineComponent({
    name: 'AddFinances',
    components: {
      FinanceList,
      Customer,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        financeListRef: null,
        form: {},
        formLoading: false,
        customer: {
          id: 0,
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        options: [
          {
            value: '查重费用',
            label: '查重费用',
          },
          {
            value: '订单收款',
            label: '订单收款',
          },
        ],
        pay_options: [
          {
            value: '支付宝',
            label: '支付宝',
          },
          {
            value: '微信',
            label: '微信',
          },
          {
            value: '现金',
            label: '现金',
          },
        ],
      })

      onMounted(() => {
        // state.financeListRef = ref('financeListRef')
      })

      const showEdit = (row) => {
        if (!row) {
          state.title = '添加'
        } else {
          state.title = '收支管理'
          row.diedline = parseTime(row.diedline, '{y}-{m}-{d}')
          state.customer = Object.assign({}, row)
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {}
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            state.formLoading = true
            state.form = {
              ...state.form,
              customer_id: state.customer.id,
            }
            try {
              const { msg } = await addCustomerFinanceRecord(state.form)
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              emit('fetch-data')

              state.financeListRef.fetchData()
            } catch (error) {
              // $baseMessage(error, 'error', 'vab-hey-message-success')
            }
            state.formLoading = false
          }
        })
      }

      return {
        ...toRefs(state),
        showEdit,
        close,
        save,
        parseTime,
      }
    },
  })
</script>
